<template>
  <div class="content-box">
    <div class="padding-box">
      <div class="search-box">
        <el-form>
          <el-form-item>
            <el-button
              class="add-btn"
              :icon="Plus"
              type="primary"
              @click="roleDialogVisible = true"
            >
              添加角色
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="table-box">
        <el-table
          :data="tableData"
          height="100%"
          stripe
          :header-cell-style="{
            color: '#828A9D',
            textAlign: 'center',
            height: '60px',
          }"
          :cell-style="{ textAlign: 'center', color: '#1B2431' }"
        >
          <el-table-column prop="date" label="角色" />
          <el-table-column prop="name" label="创建时间" />
          <el-table-column prop="state" label="角色描述" />
          <el-table-column prop="zip" label="操作" width="320px">
            <template #default="scope">
              <el-button type="primary" link>查看成员</el-button>
              <el-button type="primary" link>编辑角色</el-button>
              <el-button type="primary" link>删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-box flex jc">
        <el-pagination
          v-model:page-size="searchForm.pageSize"
          v-model:current-page="searchForm.page"
          :total="searchForm.totalAll"
          @change="sizePageChangeFunc"
          background
          layout="total,sizes,prev, pager, next,jumper"
        />
      </div>
    </div>
  </div>
  <!-- 添加角色 -->
  <el-dialog
    v-model="roleDialogVisible"
    title="添加角色"
    width="1000px"
    class="role-dialog-box"
  >
    <el-form inline :model="roleInfoform">
      <el-form-item label="角色名称">
        <el-input v-model="roleInfoform.user" clearable class="role-input1" />
      </el-form-item>
      <el-form-item label="角色描述">
        <el-input v-model="roleInfoform.user" clearable class="role-input2" />
      </el-form-item>
    </el-form>
    <div class="permission-list">
      <el-checkbox-group v-model="roleInfoform.checkedList">
        <div class="item-tr" v-for="(item, index) in perList" :key="index">
          <div class="item1-td">{{ item.name }}</div>
          <div class="item2-td">
            <div
              class="item2-tr"
              v-for="(item2, index2) in item.nodes"
              :key="index2"
            >
              <div class="item2-td-main">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="item2.name"
                  placement="right"
                >
                  <div class="item2-td-name">
                    <el-checkbox
                      :label="item2.id"
                      @change="checkAll($event, index, index2)"
                    >
                      {{ item2.name }}
                    </el-checkbox>
                  </div>
                </el-tooltip>
              </div>
              <div class="item3-td">
                <div
                  class="item-fun"
                  v-for="(item3, indx3) in item2.operation"
                  :key="indx3"
                >
                  <el-checkbox :label="item3.id">{{ item3.name }}</el-checkbox>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-checkbox-group>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="roleDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitFUnc">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { onMounted, reactive, toRefs, ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'
onMounted(() => {
  console.log('index')
})
// 添加角色
let roleDialogVisible = ref(false)
let roleInfoform = ref({})
const submitFUnc = () => {
  console.log(roleInfoform.value)
}
const checkAll = (state, idx, idx2) => {
  console.log(state, idx, idx2, 'state, idx, idx2')
  let operation = perList.value[idx].nodes[idx2].operation
  if (state) {
    setChecked(operation)
  } else {
    setUnChecked(operation)
  }
}
// 设置全不选
const setUnChecked = data => {
  let checkedList = roleInfoform.value.checkedList
  data.forEach(item => {
    if (checkedList.includes(item.id)) {
      var index = checkedList.indexOf(item.id)
      checkedList.splice(index, 1)
    }
  })
}
// 设置全选
const setChecked = data => {
  let checkedList = roleInfoform.value.checkedList
  data.forEach(item => {
    if (!checkedList.includes(item.id)) {
      checkedList.push(item.id)
    }
  })
}
let perList = ref([
  {
    name: '项目管理',
    id: 1,
    nodes: [
      {
        name: '销售列表',
        id: 2,
        operation: [
          {
            name: '删除节点',
            id: 3,
          },
          {
            name: '删除节点',
            id: 4,
          },
        ],
      },
      {
        name: '列表',
        id: 1,
        operation: [],
      },
    ],
  },
])
// 搜索
let searchForm = ref({
  pageSize: 10,
  page: 1,
  totalAll: 0,
})
const sizePageChangeFunc = e => {
  console.log(searchForm.value)
}
let tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
])
</script>
<style scoped lang="scss">
@import './index.scss';
</style>
<style lang="scss">
.role-dialog-box {
  border-radius: 8px;
  .role-input1 {
    width: 294px;
    height: 36px;
    border-radius: 4px;
  }
  .role-input2 {
    width: 417px;
    height: 36px;
    border-radius: 4px;
  }
  .permission-list {
    border: 1px solid #dde2ee;
    border-radius: 4px;
    max-height: 600px;
    overflow: auto;

    .el-checkbox-group {
      font-size: 14px;
    }

    .item-tr:last-child {
      border-bottom: unset;
    }
    .item-tr {
      border-bottom: 1px solid #dde2ee;
      display: flex;

      .item1-td {
        border-right: 1px solid #dde2ee;
        width: 100px;
        padding: 10px;
        display: flex;
        align-items: center;
      }

      .item2-td {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        position: relative;

        .item2-tr:last-child {
          border-bottom: unset;
        }
        .item2-tr {
          display: flex;
          border-bottom: 1px solid #dde2ee;

          .item2-td-main {
            border-right: 1px solid #dde2ee;
            width: 130px;
            padding: 10px 15px;
            display: flex;
            align-items: center;
            justify-content: center;

            .item2-td-name {
              width: 100px;
              overflow: hidden;
            }
          }

          .item3-td {
            width: 640px;
            padding: 10px 15px 0;
            display: flex;
            flex-wrap: wrap;

            .item-fun {
              margin-right: 15px;
              margin-bottom: 10px;
              overflow: hidden;
            }
          }
        }
      }
    }
  }
}
</style>